<template>
    <el-form ref="form" :model="form" label-width="80px" class="frame">
  <el-form-item label="商品名称">
    <el-input v-model="form.gname" id="gn"></el-input>
  </el-form-item>
  <el-form-item label="商品分类">
    <div class="block">
      <el-cascader
        v-model="form.value"
        :options="option1"
        :props="optionProps"
        @change="handleChange" id="gv"></el-cascader>
    </div>
  </el-form-item>
  <el-form-item label="商品价格">
    <el-input v-model="form.gprice" id="gp"></el-input>
  </el-form-item>
  <el-form-item label="商品数量">
    <el-input v-model="form.gquantity" id="gq"></el-input>
  </el-form-item>
  <el-form-item label="商品图片">
    <el-upload
        action=""
        id="img1"
        class="avatar-uploader"
        multiple
        :limit="5"
        :show-file-list="true"
        :http-request="UnloadImg">

        <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    </el-form-item>
  <el-form-item label="商品简介"> 
    <editor v-model="form.ginfo" id="gi"></editor>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="goodPublish" id="btn" :disabled="!form.ginfo||!form.gname||!form.gprice||!form.gquantity||!form.value">提交</el-button>
  </el-form-item>
</el-form>
  </template>
  <script>
  import Editor from "../../components/Tiny";
  export default {
    inject:['reload'],
    name:'Publish',
    components: { Editor },
    data(){
        return{
          dialogImageUrl: '',
          dialogVisible: false,
          picList: [],
          fileList: [],
          form: {
              gname: '',
              gprice:'',
              ginfo:'',
              imageurl:[],
              gstate:1,
              gquantity:null,
              value:[],
              uid:this.$store.state.uid
          },
          ImageUrl: '',
          option1: [],
          option2: [],
          optionProps:{
              value:'id',
              label:'name',
              children:'children'
          },
          
      }
    },
    methods:{
      UnloadImg(file){
          this.ImageUrl = URL.createObjectURL(file.file);
          this.form.imageurl.push(file.file)
        },
     async goodPublish() {
            if(this.form.gprice<0){
              alert("商品价格不能小于0")
            }else if(this.form.gquantity<0){
              alert("商品数量不能小于0")
            }else{
            let a =0
            const fd=new FormData()
            for(a =0;a<this.form.imageurl.length;a++){
              fd.append('file',this.form.imageurl[a])
            }
             fd.append('gname',this.form.gname)
             fd.append('gprice',this.form.gprice)
             fd.append('ginfo',this.form.ginfo)
             fd.append('gstate',this.form.gstate)
             fd.append('uid',this.form.uid)
             fd.append('gstore',this.form.gquantity)
             fd.append('level1',this.form.value[0])
             fd.append('level2',this.form.value[1])
             await this.$axios.post("/api/GoodAdd",fd,{
                  headers:{
                    'satoken':localStorage.getItem("TOKEN")
                  }
             }).then(res =>{
               // console.log('提交成功')
                //console.log(res.data.data)
                if(res.data.code==400||res.data.code==500){
                  alert(res.data.msg)
                  //this.$router.go(0)
                }
                else{
                  this.$router.push('/home/mygoods')
                  this.reload()
                }
              }).catch(error =>{
               // console.log('提交失败')
              })}
        },
       async getOptions(){
        await this.$axios.get('/api/axeTypes').then(res =>{
                this.options=res.data.data
                //console.log(this.options)
              }).catch(error =>{
               // console.log('提交失败')
                //console.log(error )
              })
       },
       handleChange(value) {
        //console.log(value[0]);
      }

  },
    computed:{
    },
    mounted(){
      this.getOptions();
      
      setTimeout(()=>{
        let a = 1
        for(a=0;a<this.options.length;a++){
          let b={}
         b.id=this.options[a].level1.id
         b.name=this.options[a].level1.name
         b.level=this.options[a].level1.level
         b.dadId=this.options[a].level1.dadId
          b.children=this.options[a].level2s
          this.option1.push(b)
        }
        //console.log(this.option1)
      },800)
    }
}
  </script>
  <style lang="less" scoped>
    .avatar{
      width:200px;
      height:200px
    }
    .frame{
    .el-form-item {
      .el-input {
        width: 200px;
      }
      .el-textarea{
        width: 200px;
      }
    }
    padding-left:200px ;
    padding-top:100px ;
    
  }
    
  </style>